<template>
  <main class="list">
    <RouterView v-slot="{ Component, route }">
      <transition :name="'fade'" mode="out-in">
        <component v-if="!route.meta.link" :is="Component" :key="route.path" />
      </transition>
    </RouterView>
  </main>
</template>

<script setup lang="ts">
import { getUserList, getMessage, sendMessage, getJargon } from '@/api';
import type { IData } from './interface';
import { onMounted, onUnmounted, reactive, ref, Transition, watch } from 'vue';
import { nextTick } from 'vue';
import { RouterView, useRouter } from 'vue-router';
import router from '@/router/createRouter';

const userList = ref()

const props = defineProps({
  type: {
    type: String,
    default: ''
  },
  followTime: {
    type: String,
    default: ''
  }
})

const data: IData = reactive({
  /**
   * 自己
   */
  self: {},
  /**
   * 搜索
   */
  search: '',
  /**
   * 用户列表
   */
  userList: [],
  /**
   * 历史信息
   */
  historyMessage: [],
  /**
   * 话术
   */
  jargon: {},
  /**
   * 用户评论
   */
  userComment: [],
  /**
   * 默认任务栏
   */
  defaultTabbar: 0,
  userType: [
    { name: '潜在客户', value: 0 },
    { name: '意向客户', value: 1 },
    { name: '成交客户', value: 2 },
    { name: '黑名单', value: 3 }
  ]
})

// 创建一个变量
const event = {
  // 获取用户列表
  async getUserList() {
    data.userList = await getUserList({
      keyword: data.search,
      type: props.type,
      follow_time: props.followTime

    })
  },

  /**
   * 点击切换用户
   * @param index 下标
   * @param item  数据
   */
  async changeUser(index: number, item: Record<string, any>) {

    data.self = item;
    // 调用data.userComment 为一个空数组
    data.userComment = [];
    // 数字类型
    if (data.historyMessagePollTimer) {
      // 有值就清除定时器
      clearInterval(data.historyMessagePollTimer);
    }
    // 为一个空数组
    data.historyMessage = [];
    await event.getHistoryMessage();
    // 定时器为3秒执行一次 它的类型是number
    data.historyMessagePollTimer = setInterval(() => {
      // 调用event的函数方法 获取历史聊天记录
      event.getHistoryMessage();
    }, 3000);
  },

  /**
   * 获取话术
   */
  async getJargon() {
    const jargon = await getJargon()
    // 创建得data.jargon为一个空对象
    data.jargon = {};
    jargon.forEach(item => {
      const key = item['name'] as string
      const contents = item['info'].map((ite: Record<string, string>) => ite['content'])
      data.jargon[key] = contents
    })
  },

  // 获取历史聊天信息
  async getHistoryMessage() {
    data.historyMessage = await getMessage({
      conversation_id: data.self['id']
    })
  },
}


watch(
  () => [props.type, props.followTime],
  () => {
    data.self = {};
    data.userComment = [];
    data.historyMessage = [];
    if (userList.value) {
      userList.value.reset()
    }
    clearInterval(data.historyMessagePollTimer);
    event.getUserList()
  }
)

onMounted(() => {
  event.getUserList();
  data.userListPollTimer = setInterval(async () => {
    event.getUserList()
  }, 1000)
})

onUnmounted(() => {
  // 清除计时器
  clearInterval(data.userListPollTimer);
  clearInterval(data.historyMessagePollTimer);
})
</script>

<style>
.list {
  width: 100%;
  height: 100%;
}

/* 全局样式 */
/* 组件离开的初始状态 */
.fade-leave-from {
  transform: translateX(0);
  /* opacity: 1; */
}

/* 组件离开的结束状态 */
.fade-leave-to {
  transform: translateX(-10px);
  /* opacity: 0; */
}

/* 组件进入的初始状态 */
.fade-enter-from {
  transform: translateX(10px);
  /* opacity: 0; */
}

/* 组件进入的结束状态 */
.fade-enter-to {
  transform: translateX(0);
  /* opacity: 1; */
}

/* 组件离开和进入的过渡效果 */
.fade-leave-active,
.fade-enter-active {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
</style>
